<!--
 * @Author: wuzhen
 * @Date: 2019-12-21 14:36:03
 * @LastEditors  : wuzhen
 * @LastEditTime : 2019-12-31 17:10:48
 * @Description: 角色管理
 -->
<template>
  <Card style="width:100%" dis-hover>
    <!-- 搜索表头/表头按钮 -->
    <search-table :search-buttons="searchButtons" @handle-click="handleClick" />
    <wz-table ref="table" :search-api="searchApi" :columns="columns" :handle-btn="handleBtn" :show-page="false" @handle-click="handleClick" />
    <!-- 用户添加、编辑 -->
    <Modal v-model="editDrawer" :title="editTitle" @on-cancel="editDrawer = false" width="550">
      <wz-form ref="form" :form-obj="formObj" :form-props="formProps" v-if="editDrawer" />
      <div slot="footer">
        <Button type="text" @click="editDrawer = false">取消</Button>
        <Button type="primary" @click="onSubmit">确定</Button>
      </div>
    </Modal>
    <!-- 权限管理 -->
    <Modal v-model="authorityDrawer" title="权限管理" @on-cancel="authorityDrawer = false" width="800">
      <Table :columns="columnsAuthority" :data="dataAuthority" v-if="authorityDrawer"></Table>
      <div slot="footer">
        <Button type="text" @click="authorityDrawer = false">取消</Button>
        <Button type="primary" @click="onSubmitAuthority">确定</Button>
      </div>
    </Modal>
  </Card>
</template>
<script>
import { getRoleList, addRole, editRole, editQryoption } from "@/request/api";
import index from "./mixins";
import form from "./mixins/form";
import authority from "./mixins/authority";
export default {
  mixins: [index, form, authority],
  data() {
    return {
      searchApi: getRoleList,
      editDrawer: false,
      editTitle: "添加",
      formObj: {},
      authorityDrawer: false
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 获取菜单数据
    async getData() {
      try {
        await this.$refs["table"].getData();
      } catch (error) {
        throw error;
      }
    },
    async handleClick(type, row) {
      this.formObj = row;
      this.type = type;
      switch (type) {
        case "add": // 添加
          this.editDrawer = true;
          break;
        case "edit": // 编辑角色
          this.editDrawer = true;
          break;
        case "editAuthority": // 编辑权限
          await this.getQryoptionData(row.roleid);
          break;
        default:
          break;
      }
    },
    // 确定
    async onSubmit() {
      try {
        const validate = await this.$refs.form.validate();
        if (validate.valid) {
          let res;
          if (this.type === "add") {
            res = await addRole({
              bean: JSON.stringify({
                ...validate.formData
              })
            });
          } else if (this.type === "edit") {
            res = await editRole({
              bean: JSON.stringify({
                ...validate.formData
              })
            });
          }
          if (res.code === 200) {
            this.$Message.success("操作成功");
            this.editDrawer = false;
            this.getData();
          } else {
            this.$Message.error("操作失败");
          }
        }
      } catch (error) {
        throw error;
      }
    },
    async onSubmitAuthority() {
      try {
        const delseq = this.$_.difference(this.basicOptionids, this.optionids);
        const delseqids = this.qryoptionData
          .filter(v => delseq.includes(String(v.optionid)))
          .map(v => v.seqid);
        const bean = this.$_.difference(this.optionids, this.basicOptionids);
        const arrayData = bean.map(v => {
          return {
            roleid: this.formObj["roleid"],
            optionid: v
          };
        });
        const res = await editQryoption({
          delseqids: JSON.stringify(delseqids),
          bean: JSON.stringify(arrayData)
        });
        if (res.code === 200) {
          this.$Message.success("操作成功");
          this.authorityDrawer = false;
          this.getData();
        } else {
          this.$Message.error("操作失败");
        }
      } catch (error) {
        throw error;
      }
    }
  }
};
</script>
<style lang="less" scoped></style>
